<ng-container *ngIf="profile() as profile">
  <div class="banner">
    <div class="container">
      <div class="user-info">
        <img alt="avatar" class="avatar" [src]="profile.image" />
        <h4 class="username">{{ profile.username }}</h4>
      </div>
      <button
        (click)="toggleFollow()"
        *ngIf="!isCurrentUser(); else editProfileBtn"
        class="btn btn-outline-secondary btn-sm ms-auto d-flex align-items-center"
      >
        <i class="fa-solid fa-plus me-1"></i> {{profile.following ? 'Unfollow' : 'Follow'}} {{ profile.username }}
      </button>
      <ng-template #editProfileBtn>
        <button
          class="btn btn-outline-secondary btn-sm ms-auto d-flex align-items-center"
          routerLink="/settings"
        >
          <i class="fa-solid fa-gear me-1"></i> Edit Profile Settings
        </button>
      </ng-template>
    </div>
  </div>
  <div class="content">
    <div class="offset-md-1">
      <app-article-toggle></app-article-toggle>
      <router-outlet></router-outlet>
    </div>
  </div>
</ng-container>
